<template>
  <div>
    <el-dialog :visible.sync="visible"
               title="医生配置"
               width="50%"
               :before-close="modalClose"
               center
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-button type="primary"
                 @click="op('', 'add')">新 增</el-button>
      <element-table :columns="columns"
                     class="mt-20"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     :height="441"
                     @handleChangePage="handleChangePage">

        <template v-slot:edit="{row}">
          <el-button type="primary"
                     @click="op(row, 'edit')">编 辑</el-button>
          <el-button type="danger"
                     @click="op(row, 'del')">删 除</el-button>
        </template>
      </element-table>
      <el-dialog width="30%"
                 :title="title"
                 :visible.sync="innerVisible"
                 append-to-body>
        <el-form :model="addForm"
                 :rules="addRules"
                 ref="addRef"
                 label-width="100px">
          <el-form-item label="医生账号"
                        prop="phone">
            <el-select v-model="addForm.phone"
                       filterable
                       clearable
                       placeholder="请选择医生账号"
                       :filter-method="changeVisiblePhobe"
                       @change="changePhone">
              <el-option v-for="item in phoneList"
                         :label="item"
                         :value="item"
                         :key="item"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="医生姓名"
                        prop="doctorName">
            <el-input v-model="addForm.doctorName"
                      class="w-200"
                      :disabled="true"
                      placeholder="请选择医生账号查询医生姓名"></el-input>
          </el-form-item>
          <el-form-item label="解读费用"
                        prop="readPrice">
            <el-input v-model="addForm.readPrice"
                      placeholder="请输入解读费用"
                      class="w-200"></el-input>
          </el-form-item>
        </el-form>
        <div class="add-doctors">
          <el-button type="primary"
                     @click="saveBtn(currentStatus)">确 定</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>

        </div>
      </el-dialog>

    </el-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      doctorsInfo: {
        type: Object,
        default: false
      },
      getParentList: {
        type: Function,
        default: ''
      }
    },
    data () {
      return {
        loading: false,
        innerVisible: false,
        title: '',
        currentStatus: '',
        columns: [
          {
            label: '医生账号',
            prop: 'phone',
            width: 200
          },
          {
            label: '姓名',
            prop: 'name',
            width: 200
          },
          {
            label: '解读费用（元）',
            prop: 'readPrice',
            width: 200
          },
          {
            label: '操作',
            prop: 'edit',
            isSlot: true
          }
        ],
        tableData: [],
        pageTotal: 0,
        pageIndex: 0,
        pageSize: 10,
        addRules: {
          phone: [
            { required: true, message: '请选择医生账号', trigger: 'change' },
          ],
          doctorName: [
            { required: true, message: '请选择医生账号查询医生姓名', trigger: 'blur' },
          ],
          readPrice: [
            { required: true, message: '请输入解读费用', trigger: 'blur' },
            {
              validator (rule, value, callback) {
                var reg = /^-?\d{1,5}(?:\.\d{1,2})?$/
                if (reg.test(value)) {
                  callback()
                } else {
                  callback(new Error('请输入大于零小于十万不超过二位小数的数字'))
                }
              },
              trigger: 'blur'
            }
          ]
        },
        addForm: {
          phone: '',
          doctorName: '',
          readPrice: ''
        },
        phoneList: []
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性 
      },

      async changeVisiblePhobe (val) {
        if (val) {
          const { data: res } = await this.post(this.api.ECG.fuzzyByPhone, {
            phone: val
          })
          if (res.code === '200') {
            this.phoneList = res.object;
          }
        }

      },

      // 选择医生账号
      async changePhone (val) {
        if (val) {
          const { data: res } = await this.post(this.api.ECG.queryByPhone, {
            phone: val
          })
          if (res.code === '200') {
            this.$set(this.addForm, 'doctorName', res.object.doctorName);
          }
        } else {
          this.phoneList = [];
          this.addForm.doctorName = '';
        }

      },
      // 保存医生配置
      saveBtn (currentStatus) {
        switch (currentStatus) {
          case 'add':
            this.$refs.addRef.validate(async (valid) => {
              if (valid) {
                try {
                  const { data: res } = await this.post(this.api.ECG.addDoctorsConfig, this.addForm)
                  if (res.code === '200') {
                    this.$message.success('新增成功!')
                    this.innerVisible = false
                    this.getList()
                  }
                } catch (error) { }
              }
            })
            break
          case 'edit':
            this.$refs.addRef.validate(async (valid) => {
              if (valid) {
                const { data: result } = await this.post(this.api.ECG.modifyDoctorsConfig, this.addForm)
                if (result.code === '200') {
                  this.$message.success('修改成功!')
                  this.innerVisible = false
                  this.getList()
                }
              }
            })
            break
        }
      },
      // 新增 、编辑、删除
      op (row, option) {
        switch (option) {
          case 'add':
            this.innerVisible = true
            this.title = '新增'
            this.currentStatus = 'add'
            if (this.$refs.addRef) {
              this.$refs.addRef.resetFields();
            }
            break
          case 'edit':
            this.innerVisible = true
            this.title = '编辑'
            this.currentStatus = 'edit'
            this.post(this.api.ECG.doctorConfigDetail, {
              id: row.id
            }).then(({ data }) => {
              if (data.code === '200') {
                this.addForm = data.object
                this.addForm.doctorName = data.object.name
              }
            })
            break
          case 'del':
            this.$confirm('确认删除？')
              .then(_ => {
                this.post(this.api.ECG.delDoctorConfig, {
                  id: row.id
                }).then(({ data }) => {
                  if (data.code === '200') {
                    this.$message.success('删除成功!')
                    this.getList()
                  }
                })
              })
              .catch(_ => { });
            break
        }
      },

      async getList () {
        const { data: res } = await this.post(this.api.ECG.getDoctorConfigList)
        if (res.code === '200') {
          this.tableData = res.object
        }
      },
      handleChangePage (page) {
        this.pageIndex = page
        this.getList();
      },

    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style scoped lang="scss">
  .add-doctors {
    text-align: center;
  }
</style>